<template>
    <div
      ref="draggableElement"
      :class="['draggable-container', size == 'small'? 'small' : '']"
    >
      <div class="draggable-title" :style="{cursor:!isuseDraggable? 'default': 'grab'}">
        <p class="sst"> {{ title }}</p>
        <slot name="header"></slot>
           <div class="close" @click="closeDialog"></div>
      </div>
   
      <div class="tconten">
       <slot></slot>
      </div>
    </div>
  </template>  
     
    
    <script setup>
  import { ref, defineProps, defineEmits,onMounted } from 'vue'
  import { useDraggable } from '../hook/useDraggable'

  const props = defineProps({
    title:{
        type:String,
        default:"标题"
    } ,
   
    size:{
        type:String,
        default:"big",
    },
    yheight:{
        type:Number,
        default:0,
    },
    isuseDraggable:{
      type:Boolean,
      default:true,
    },
    isFixed:{
      type:Boolean,
      default:false,
    }
    
  })
  const emits = defineEmits(['close']);
  const draggableElement = ref(null)
  let initData;
  if (props.isuseDraggable) {  
       ({initData:initData}  = useDraggable(draggableElement))
  } 

  const closeDialog = () => {
    emits('close')
  }
  onMounted(()=>{
    if(props.isuseDraggable && props.isFixed){
      const a = draggableElement.value.getBoundingClientRect();
      console.log();
      
      draggableElement.value.style.position = "fixed";
      draggableElement.value.style.left= a.x +"px";
      draggableElement.value.style.top= window.document.body.clientHeight * 0.08+ 100 + props.yheight +"px";
      initData()
    }

   
  })
  
  </script>  
      
    <style scoped>
  .draggable-container {
     height: 290px;
     width: 450px;
    background-image: url(/static/icon/chart.png);
    background-size: 100% 100%;
    color: #ffffff;
    z-index: 10;
    margin-top: 10px;
  
  }
  .small{
    height: 200px;
    background-image: url(/static/icon/textdialog.png);
  }
  .draggable-title {
    cursor: grab;
    user-select: none;
    height: 35px;
    line-height:35px;
    padding-left: 35px;
     padding-right: 35px;
   
    display: flex;
    position: relative;
  }
  .sst{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    margin: 0;
    padding: 0;
  }
  
  .tconten {
    height: calc(100% - 35px);
    padding: 8px 20px;
    box-sizing: border-box;
  }
  .close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  </style>